import React from 'react';
import {useLocation,useParams} from 'react-router-dom'
import { UserAPI } from '../utils';
function UserDetail(){
    //定义一个状态，默认是一个空对象，表示当前的详情页对应的用户信息
    let [user,setUser] = React.useState({});
    //调用路由库提供的自定义hook获取当前的路径对象
    let location = useLocation();
    //调用useParams方法，返回当前的路径参数对象
    let params = useParams();
    //当页面渲染完毕后执行副作用函数
    React.useEffect(()=>{
        //获取到路径对象中的状态
        //只有此路径是从列表页面跳转过来的才会有state
        let user  = location.state;
        //如果说没有从当前的路径对象中获取到user对象
        if(!user){
            //获取路径参数对象中的id属性
            let {id}= params;
            user=UserAPI.find(id);
        }
        //修改状态
        setUser(user);
    },[]);
    return (
        <div>
            <p>ID:{user.id}</p>
            <p>username:{user.username}</p>
        </div>
    )
}
export default UserDetail;